
<template>
	<el-container class="minad">
		<el-aside :style="{'width':isCollapse?'65px':'200px'}" class="left">

			<el-menu :router="true" default-active="0" class="el-menu-vertical-demo" :collapse="isCollapse">
				<el-menu-item index="" @click="isCollapse=!isCollapse">
					<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
					<span slot="title">收起</span>
				</el-menu-item>
				<el-menu-item index="/home/minad/dash">
					<i class="el-icon-menu"></i>
					<span slot="title">业务审核</span>
				</el-menu-item>
				<el-menu-item index="/home/minad/orderlist">
					<i class="el-icon-menu"></i>
					<span slot="title">批量退款审批</span>
				</el-menu-item>
			</el-menu>

		</el-aside>
		<router-view></router-view>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				// 控制侧边栏是否折叠
				isCollapse: false,
			}
		},
		created() {
			// onresize 当窗口尺寸发生变化时候
			window.onresize = () => {
				// 获取视口的宽
				var w = window.innerWidth;
				// 如果小于1200 应该折叠
				if (w < 1200) {
					this.isCollapse = true;
					// 否则展开
				} else {
					this.isCollapse = false;
				}
			}
		}
	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	.minad {
		display: flex;
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f0;


		.left {
			height: 100%;
			width: 250px;
			background-color: #fff;
		}

		.right {
			flex: 1;
		}
	}
</style>
